<template>
  <span class="file-box" @click="download">
    <v-icon icon="svg-file" style="font-size: 20px; margin-right: 5px" />
    <span class="file-text">{{ fileName }}</span>
  </span>
</template>

<script>
export default {
  name: 'File',

  props: {
    fileName: {
      type: String,
      default: null
    },
    file: {
      type: String,
      default: null
    }
  },

  methods: {
    download() {
      if (!this.file) return this.$message.warning('没有这样的文件')
      window.open(this.file)
    }
  }
}
</script>

<style lang="scss" scoped>
// 文件盒子
.file-box {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.file-text {
  flex: 1;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
